<template>
	<scroll-view scroll-y class="bgf5 recharge" :style="{height: 'calc(100vh)' }">
	
		<view class="bgff">
			<view class="bold6 c57 fs16 p15">
				<text class="fs12 mr2">●</text>
				<text>充值金额</text>
			</view>
			<view class="flex flexC flexW px9">
				<view v-for="(item, index) in chargeList" :key="index"
					class="aliC r2 w33  py14 boxS mx6 mb12 flex flexCol flexC"
					:class="index == selectChargeIndex ? 'bgborder' : 'bor70'" @click="selectCharge(item,index)">
					<view class="fs16 bold6">￥{{item}}</view>
				</view>
			</view>
		</view>
		<view class="bgf5 px15 pb30 mt40 fs12 c85">
		
			<view class="bg41 r5 aliC py12 mt14" @click="addOrder">立即充值</view>
	
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				chargeList:[100,200,500,1000],
				selectChargeIndex:0,
				orderNo:''
			};
		},
		onLoad(option) {

			console.info(option.info);
		
		
		},
		onShow() {
			var payStatus = uni.getStorageSync("payStatus");
			if(payStatus == 1){
				var orderNo = uni.getStorageSync("orderNo");
				console.info("=========orderNo======="+orderNo)
				uni.removeStorageSync("payStatus");
				uni.removeStorageSync("orderNo");
				uni.showModal({
					title:"充值提醒",
					content:"恭喜您,充值成功",
					showCancel:false,
					complete(res) {
						uni.navigateBack({delta:1})
					}
				})
			}
		},
		methods: {
			
			addOrder(){
				
				var pay = this.chargeList[this.selectChargeIndex];
				let param = {
					amount:pay,
					shop_id:uni.getStorageSync("shop_id")
				}
				let that = this;
				this.$api.addChargeOrder(param).then(res => {
				
					if (res.code == 1) {
				
						that.orderNo = res.data.orderNo;
						uni.setStorageSync("orderNo",that.orderNo)
						//that.wechatPay(res.data.payInfo);
						uni.openEmbeddedMiniProgram({
						    'appId':res.data.appId,      
						    'path':res.data.path    
						 })
					}
				})
			},
			

			selectCharge(item,index){
				this.selectChargeIndex = index;
			}



		}
	}
</script>

<style lang="scss" scoped>
	.recharge {
		.w12 {
			width: 14rpx;
			height: 14rpx;
		}

		.w4 {
			width: 10rpx;
			height: 10rpx;
		}

		.tip {
			width: 20rpx;
			height: 20rpx;
		}

		.bg6c {
			background-color: #6C86CF;
			border-radius: 12rpx 12rpx 0 0;
			color: #fff;

			.box {
				border: 2rpx solid #fff;
			}
		}

		.w33 {
			width: calc(33.33% - 28rpx);
			color: #000;

			&.bg57 {
				color: #fff;
			}
		}
	}
</style>
